<template>
  <div id="edit-area">
    <el-form :inline="true" :model="formData" :rules="validatorRules" ref="formData" class="demo-form-inline">
      <el-form-item label="车辆信息" prop="vehicleId">
          <el-select v-model="formData.vehicleId" placeholder="请选择车辆">
              <el-option v-for="item in carList" :label="item.name" :value="item.id" :key="item.id"></el-option>
          </el-select>
      </el-form-item>
	  <el-form-item label="设备信息" prop="code">
          <el-select v-model="formData.code" placeholder="请选择设备">
              <el-option v-for="item in deviceList" :label="item.name" :value="item.code" :key="item.id"></el-option>
          </el-select>
	  </el-form-item>
   <!--   <el-form-item label="车辆驾驶员" prop="responsible">
        <el-input v-model="formData.responsible"  placeholder="请选驾驶员任人" suffix-icon="el-icon-circle-plus-outline" @focus="openSelector"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remark"  >
        <el-input v-model="formData.remark" maxlength="100" placeholder="请输入备注"></el-input>
      </el-form-item>-->
    </el-form>
    <div class="button-bar">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submit" :loading="btnLoading">确 定</el-button>
      <el-button type="primary" @click="resetForm">重 置</el-button>
    </div>
    <userSelector class="uselector" :isRadio="true" ref="userSelector" :initData="formData.responsible" @output="checkedUser"></userSelector>
  </div>
</template>
<script>
import treeMixin from "@/components/tree/tree.mixin.js"
import userSelector from "@/components/userSelector"
  export default {
    mixins:[treeMixin],
	components:{userSelector},
    props:{
      initData:{
        type:Object,
        default:()=>{},
        required:false,
      },
        carList:{
          type:Array,
            default:[]
        },
        deviceList:{
          type:Array,
            default:[]
        }
    },
    data(){
      return{
        areaplaceTypeList:[],//车辆等级
        formData:{
            vehicleId:"",
            code:""/*,
            responsibleId:"",
            responsible:"",
            remark:""*/
        },
        validatorRules:{
            vehicleId:[
            {required: true, message: '请选择车辆信息', trigger: 'change'},
          ],
         /* responsible:[
            {required: true, message: '请选择驾驶员', trigger: 'change'},
          ],*/
            code:[
                {required: true, message: '请选择设备信息', trigger: 'change'},
            ]
        },
		btnLoading:false
      }
    },
    watch:{
      initData:{
        handler(newVal){
            this.resetForm()
        },
        deep:true
      }

    },
    methods:{
      submit(){
        var isValidate=false
        this.$refs.formData.validate((bool)=>{
            isValidate=bool
        })
        if(!isValidate){return}
        let submitData=this.formData;/*
        submitData.moduleName="车辆设备"*/
		this.btnLoading=true
        this.$http.addCarDevice(submitData)
        .then((res)=>{
          this.$message.success("操作成功！")
          this.resetForm()
          this.$emit("refresh")
          this.$emit('closeDialog',false)
		  this.btnLoading=false
        }).catch((err)=>{
			this.btnLoading=false
           throw(err)
        })

      },

      resetForm(){
          if(this.initData){
              for(var key in this.formData){
                  if(this.initData[key]){
                      this.formData[key] = this.initData[key];
                  }else {
                      this.formData[key] = ""
                  }
              }
          }else{
              this.$refs.formData.resetFields()
              for(var key in this.formData){
                  this.formData[key]=""
              }
          }
      },

      cancel(){
        this.resetForm()
       // this.$emit("refresh")
        this.$emit('closeDialog',false)
      },

	  openSelector(){
		  this.$refs.userSelector.showDialog=true
	  },

	  checkedUser(users){
		  var ids=users.map((item)=>{
			  return item.id
		  }).toString()
		  var names=users.map((item)=>{
			  return item.name
		  }).toString()
		  this.$set(this.formData,"responsibleId",ids)
		  this.$set(this.formData,"responsible",names)
	  }

    },

    created(){

    }

  }
</script>
<style scoped lang='scss'>
	#edit-area{
		height: 100%;
		display: flex;
		flex-direction: column;
		flex: 1;
		.el-form{
			flex:1;
		}
	}
  .button-bar{
    text-align: center;
    margin: 20px;
    .el-button{
      margin:0px 10px;
    }
  }

  /deep/ .el-dialog{
	  .el-dialog__body{
		  display: flex;
		  flex-direction: column;
	  }
  }
</style>
<style scoped lang="scss">
  //element样式微调
  /deep/ .el-form.el-form--inline{
    display: flex;
    flex-wrap: wrap;
    /deep/ .el-form-item{
      flex-basis: 40%;
      flex-grow: 1;
      margin: 10px;
      .el-input-group__append{
        padding:0px;
        width:38px;
        text-align:center;
        .iconfont{
          display:inline-block;
          width:100%;
          height: 38px;
          line-height: 38px;
        }
      }
    }
  }


</style>



